import React from "react";

import { createBrowserRouter, Navigate, useNavigate } from "react-router-dom";
import Layout from "../layouts";

import Home from "../views/Home";
import RoughPage from "../views/Rough";
import TimeLine from "../views/TimeLinePage/index";
import TimelineEditor from "../views/TimelineEditor";
import Mark from "../views/Mark2";

// 自己声明了一个 重定向组件
const Redirect = () => {
  const navigate = useNavigate();
  //组件挂载时进行挂载
  React.useEffect(() => {
    navigate("/home");
  }, []);

  return null;
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/",
        element: <Redirect />,
      },
      {
        path: "/home",
        element: <Home />,
      },
      {
        path: "/rough",
        element: <RoughPage />,
      },
      {
        path: "/timeline",
        element: <TimeLine />,
      },
      {
        path: "/timeline-editor",
        element: <TimelineEditor />,
      },
      {
        path: "/mark",
        element: <Mark />,
      }
    ],
  },
  {
    path: "/",
    element: <Navigate to="home"></Navigate>, //重定向配置
  },
]);

export default router;
